<template>
	<AppHeader />
	<AppFilters :active-filter="activeFilter" @set-filter="setFilter" />

	<main class="app-main">
		<AppTodoList
			:todos="filteredTodos"
			@remove-todo="removeTodo"
			@toggle-todo="toggleTodo"
		/>
		<AppAddTodo @add-todo="addTodo" />
	</main>

	<AppFooter :stats="stats" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import AppAddTodo from './components/AppAddTodo.vue'
import AppFilters from './components/AppFilters.vue'
import AppFooter from './components/AppFooter.vue'
import AppHeader from './components/AppHeader.vue'
import AppTodoList from './components/AppTodoList.vue'
import { Filter } from './types/Filter'
import { Stats } from './types/Stats'
import { Todo } from './types/Todo'

interface State {
	todos: Todo[]
	activeFilter: Filter
}

export default defineComponent({
	components: {
		AppFooter,
		AppAddTodo,
		AppTodoList,
		AppFilters,
		AppHeader,
	},
	data(): State {
		return {
			todos: [
				{
					id: 0,
					text: 'fdsfds',
					completed: true,
				},
				{
					id: 1,
					text: 'fdsfds 2',
					completed: false,
				},
				{
					id: 2,
					text: 'fdsfds 3',
					completed: false,
				},
			],
			activeFilter: 'All',
		}
	},
	methods: {
		addTodo(todo: Todo) {
			this.todos.push(todo)
		},
		toggleTodo(id: number) {
			const targetTodo = this.todos.find((todo: Todo) => todo.id === id)

			if (targetTodo) {
				targetTodo.completed = !targetTodo.completed
			}
		},
		removeTodo(id: number) {
			this.todos = this.todos.filter((todo: Todo) => todo.id !== id)
		},
		setFilter(filter: Filter) {
			this.activeFilter = filter
		},
	},
	computed: {
		filteredTodos(): Todo[] {
			switch (this.activeFilter) {
				case 'Active':
					return this.activeTodos
				case 'Done':
					return this.doneTodos
				case 'All':
				default:
					return this.todos
			}
		},
		stats(): Stats {
			return {
				active: this.activeTodos.length,
				done: this.doneTodos.length,
			}
		},
		activeTodos(): Todo[] {
			return this.todos.filter((todo: Todo) => !todo.completed)
		},
		doneTodos(): Todo[] {
			return this.todos.filter((todo: Todo) => todo.completed)
		},
	},
})
</script>
